<template>
  <div class="home">
    <div class="nav">
      <!-- <p @click="change(0)" :class="{ active: flag == 0 }">已读 </p>
      <p @click="change(1)" :class="{ active: flag == 1 }">未读</p>
      <p @click="change(2)" :class="{ active: flag == 2 }">回收站</p> -->
      <p
        v-for="(item, index) in nav"
        :key="index"
        @click="change(index)"
        :class="{ active: flag == index }"
      >
        {{ item }}=={{ num[index] }}
      </p>
    </div>

    <ul v-show="flag == 0">
      <li
        v-for="(item, index) in list"
        v-show="item.status == 0"
        :key="item.id"
      >
        {{ item.title }}
        <button @click="fun1(index)">标为已读</button>
      </li>
      <button @click="all1">全部已读</button>
    </ul>
    <ul v-show="flag == 1">
      <li
        v-for="(item, index) in list"
        v-show="item.status == 1"
        :key="item.id"
      >
        {{ item.title }}
        <button @click="fun2(index)">标为未读</button>
        <button @click="fun3(index)">删除</button>
      </li>
      <button @click="all2">全部删除</button>
    </ul>
    <ul v-show="flag == 2">
      <li
        v-for="(item, index) in list"
        v-show="item.status == 2"
        :key="item.id"
      >
        {{ item.title }}
        <button @click="fun1(index)">还原</button>
      </li>
      <button @click="all3">全部还原</button>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nav: ["未读", "已读", "回收站"],
      flag: 0,
      list: [],
    };
  },
  mounted() {
    this.$axios.get("data.json").then((res) => {
      this.list = res.data.list;
    });
  },

  methods: {
    change(i) {
      this.flag = i;
    },
    fun1(i) {
      this.list[i].status = 1;
    },
    //标为已读
    fun2(i) {
      this.list[i].status = 0;
    },
    //标为未读
    fun3(i) {
      this.list[i].status = 2;
    },
    //删除 进入回收站

    all1() {
      this.list.forEach((item) => {
        if (item.status == 0) {
          item.status = 1;
        }
      });
    },
    //全部标为已读
    all2() {
      this.list.forEach((item) => {
        if (item.status == 1) {
          item.status = 2;
        }
      });
    },
    //全部删除
    all3() {
      this.list.forEach((item) => {
        if (item.status == 2) {
          item.status = 1;
        }
      });
    },
    //全部还原
  },
  computed: {
    num() {
      let num1 = this.list.filter((item) => {
        return item.status == 0;
      }).length;
      let num2 = this.list.filter((item) => {
        return item.status == 1;
      }).length;
      let num3 = this.list.filter((item) => {
        return item.status == 2;
      }).length;
      return [num1, num2, num3];
    },
  },
};
</script>
<style lang="scss" scoped>
.nav {
  display: flex;
  border-bottom: 1px solid #ccc;
  p {
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
  }
  .active {
    color: skyblue;
    border-bottom: 1px solid skyblue;
  }
}
</style>
